<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/template-web.js"></script>
</head>
<body>
    <!-- 
        需求：将服务端返回的数据，梵高页面html标签中
        思路：基于document生成新的标签，再将标签插入到指定的元素当中

        使用框架实现： template-web的使用方式
        {{}}：取值的

     -->

     <ul id="ul1">
         <script type="text/html" id="tpl1">
            <li>{{username}}</li>
            
        </script>
     </ul>

     <!-- 
         通过Ajax到后台加载数据...
      -->
     <script>
         /* 
            将数据跟模板进行结合
            第一个参数：是模板的id
            第二个参数：是json格式的数据
         */
         const tmpContent1 = template('tpl1',{"username":"比屋教育"});
         //渲染之后的数据
         console.log(tmpContent1)

         //插入结果到指定的地方
         document.querySelector("#ul1").innerHTML = tmpContent1;
     </script>
</body>
</html>